<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <a4j:outputPanel id="#{playerDetailPanelID}"
                     style="position: absolute;
                     left: #{mouseX}px;
                     top: #{mouseY}px;"
                     layout="block" >
        <rich:panel style="overflow: hidden;"
                    rendered="#{not empty player}" >

            <f:facet name="header" >
                <h:panelGroup style="overflow: hidden;">
                    <h:outputText value="#{bundle.playerDetailPanelTitle}" />
                    <a4j:commandButton image="/resources/icons/application-exit-icon.png" 
                                       execute="@this" render="#{playerDetailPanelID}"
                                       value="" styleClass="detailPanelCloseButton" >
                        <f:setPropertyActionListener target="#{playerManagedBean.currentlyDetailedPlayer}" value="#{null}" /> 
                    </a4j:commandButton>
                </h:panelGroup>
            </f:facet>

            <h:graphicImage library="images" name="player.png" />
            <h:panelGrid columns="2" style="float: right;" >
                <h:outputLabel value="#{bundle.playerDetailName}:"
                               for="playerDetailFullName" />
                <h:outputText value="#{player.name}"
                              id="playerDetailFullName" />

                <h:outputLabel value="#{bundle.team}:" 
                               for="playerDetailTeamName" />
                <h:outputText value="#{player.teamName}"
                              id="playerDetailTeamName" />

                <h:outputLabel value="#{bundle.shirtNumber}:" 
                               for="playerDetailShirtNumber" />
                <h:outputText value="#{player.shirtNumber}" 
                              id="playerDetailShirtNumber" />

                <h:outputLabel value="#{bundle.playerDetailScoredGoals}:"
                               for="playerDetailScoredGoals" />
                <h:outputText value="#{player.scoredGoals}" 
                              id="playerDetailScoredGoals" />
            </h:panelGrid>
        </rich:panel>
    </a4j:outputPanel>

</ui:composition>

